<template>
    <div>
      test page1111
      <h1>
        <div>{{ productList }}</div>
        123456
      </h1>
      <h2>{{ a }}</h2>
  
      <a-card title="DHL eCommerce US" style="width: 800px; margin-left: 100px">
        <a-timeline>
          <a-timeline-item color="green">
            <p class="tw-flex tw-items-center tw-justify-between">
              <span>运输途中</span>
              <span>当地时间:2024-12-04 14:07:03</span>
            </p>
            <p>US, US, Whittier, CA, US 90601, EN ROUTE TO DHL ECOMMERCE OR AWAITING PROCESSING US, US, Whittier, CA, US 90601, EN ROUTE TO DHL ECOMMERCE OR AWAITING PROCESSING</p>
          </a-timeline-item>
          <a-timeline-item color="#4e84f7">
            <p class="tw-flex tw-items-center tw-justify-between">
              <span>运输途中</span>
              <span>当地时间:2024-12-04 14:07:04</span>
            </p>
            <p>US, US, Whittier, CA, US 90601, EN ROUTE TO DHL ECOMMERCE OR AWAITING PROCESSING US, US, Whittier, CA, US 90601, EN ROUTE TO DHL ECOMMERCE OR AWAITING PROCESSING</p>
          </a-timeline-item>
          <a-timeline-item color="#436ffa">
            <p>Solve initial network problems 1</p>
            <p>Solve initial network problems 2</p>
            <p>Solve initial network problems 3 2015-09-01</p>
          </a-timeline-item>
          <a-timeline-item>
            <p>Technical testing 1</p>
            <p>Technical testing 2</p>
            <p>Technical testing 3 2015-09-01</p>
          </a-timeline-item>
          <a-timeline-item color="gray">
            <p>Technical testing 1</p>
            <p>Technical testing 2</p>
            <p>Technical testing 3 2015-09-01</p>
          </a-timeline-item>
          <a-timeline-item color="gray">
            <p>Technical testing 1</p>
            <p>Technical testing 2</p>
            <p>Technical testing 3 2015-09-01</p>
          </a-timeline-item>
        </a-timeline>
  
      </a-card>
  
      <a-card title="DHL eCommerce US" style="width: 800px">
        <a-timeline>
          <a-timeline-item
            v-for="(item, index) in timelineData"
            :key="index"
            :color="item.color"
          >
            <template #label>
              <span>{{ item.time }}</span>
            </template>
            <div>{{ item.message }}</div>
          </a-timeline-item>
        </a-timeline>
      </a-card>
    </div>
  </template>
  
  <script lang="ts" setup>
  // import { fetchInitData } from '@/composables';
  const productList = ref();
  const timelineData = ref([
    {
      time: '2024-12-04 14:07:03',
      message:
        'US, US, Whittier, CA, US 90601, EN ROUTE TO DHL ECOMMERCE OR AWAITING PROCESSING',
      color: 'blue',
    },
    {
      time: '2024-12-04 14:00:24',
      message:
        'US, US, Whittier, CA, US 90601, DHL ECOMMERCE CURRENTLY AWAITING SHIPMENT AND TRACKING WILL BE UPDATED WHEN RECEIVED',
      color: 'green',
    },
    {
      time: '2024-12-04 03:12:29',
      message: 'US, US, Whittier, CA, US 90601, LABEL CREATED',
      color: 'gray',
    },
  ]);
  const handleTest = async () => {
    //const { data } = await useFetch('/api/test');
    productList.value = [];
  };
  const a = ref();
  if (process.client) {
    a.value = 'client';
  } else {
    a.value = 'server';
  }
  // onMounted(() => {
  //   const cookieValue = useCookie('utoken');
  //   console.log(cookieValue.value);
  //   // cookieValue.value = 'asasdsafd';
  // });
  // if (process.server) {
  //   await handleTest();
  // } else {
  //   handleTest();
  // }
  
  // await fetchInitData(handleTest);
  handleTest();
  // if (process.server) {
  //   productList.value = 123;
  // } else {
  //   productList.value = 456;
  // }
  
  // const { data } = useFetch('/api/test');
  </script>
  